import React, { useEffect, useState } from 'react'
import axios from 'axios'
import ListData from '../../components/list/Index'
import {  NavBar,Dropdown } from 'antd-mobile'
import img1 from '../../../public/1.jpg'
import {  SearchOutline } from 'antd-mobile-icons'
import style from './index.module.css'
function Index() {
    //获取列表数据
   const [data,setData]=useState([])
   const getListData=()=>{
       axios.get('/api/room/list').then(res=>{
          
            const newList=res.data.data.list 
            console.log(newList)
        setData(data.concat(newList))
       })
     
   }
   useEffect(()=>{
    getListData()
   },[])


   const [isSticky,setSticky]=useState(false)
  
   useEffect(()=>{
    
    const getSticky=()=>{
       
      let select = document.querySelector('.select')
     if(select){
         let selectTop = select.getBoundingClientRect().top 
        
         if(selectTop<=0)
         {
            setSticky(true)
         }else{
            setSticky(false)
         }
     }

    }
     //滑动事件
     window.addEventListener('scroll',getSticky)
     return()=>{
         window.addEventListener('scroll',getSticky)
     }
   },[])



  return (
    <div>
       
      
            <NavBar right={<SearchOutline/>} className={style[isSticky ? 'stickyq':'']} >美食</NavBar>
       
       

   <div>
     <img src={img1} alt=""  style={{width:'100%',height:'200px'}}/>
   </div>
   
     <div >
        <Dropdown className='select'>
          <Dropdown.Item key='sorter' title='排序'>
            <div style={{ padding: 12 }}>
              排序内容
              <br />
              排序内容
              <br />
              排序内容
              <br />
              排序内容
              <br />
            </div>
          </Dropdown.Item>
          <Dropdown.Item key='bizop' title='商机筛选'>
            <div style={{ padding: 12 }}>
              商机筛选内容
              <br />
              商机筛选内容
              <br />
              商机筛选内容
              <br />
            </div>
          </Dropdown.Item>
          <Dropdown.Item key='more' title='更多筛选'>
            <div style={{ padding: 12 }}>
              更多筛选内容
              <br />
              更多筛选内容
              <br />
            </div>
          </Dropdown.Item>
        </Dropdown>
     </div>



      <ListData data1={data}></ListData>
    </div>
  )
}

export default Index
